<template>
  <div class="photo">
    <div id="results"></div>
    <input
      type="button"
      style="font-size: 18px;
    top: 13%;
    left: 83%;
    z-index: 9;
    padding: 10px 16px"
      @click="quit"
      class="close"
      value="退出拍照"
    />
    <div id="my_camera"></div>

    <el-image
      style="width: 80%; height: auto"
      :src="url"
      v-show="isImg"
      :preview-src-list="srcList"
    >
    </el-image>
    <el-progress
      v-show="isProgerss"
      :text-inside="true"
      :stroke-width="24"
      :percentage="progress"
      status="success"
    ></el-progress>
    <form>
      <div id="pre_take_buttons" v-show="!isSave">
        <button  class="iconfont el-icon-paizhao"  type="button"  @click="take_snapshot"> 拍 照</button>    
        <!-- <input type="button" value="拍 照" @click="take_snapshot()" />   -->
      </div>
      <div v-show="isSave">
        <input
          type="button"
          value="&lt; 重 新 拍 照"
          style="left: 33%;"
          @click="cancel_preview()"
        />
        <input
          type="button"
          value="上 传 图 片  &gt;"
          @click="save_photo()"
          style="font-weight:bold;left: 67%;background:#008080;color:#fff"
        />
      </div>
    </form>

    <alert :warndata="warndata" />
  </div>
</template>
<script>
// var Webcam;
import alert from "./Alert.vue";
import Webcam from "webcamjs";
export default {
  components: { alert },
  props:{
  },
  data() {
    return {
      isSave: false,
      warndata: [],
      isProgerss: false,
      progress: 0,
      url: "",
      isImg: false,
      srcList: [],
    };
  },
  watch: {},
  methods: {
    // 拍照
    take_snapshot() {
      // Webcam.freeze();
      let _this = this;
      Webcam.snap((data_uri)=> {
        _this.url = data_uri;
        _this.isImg = true;
        _this.srcList=[];
        _this.srcList.push(data_uri);
        Webcam.freeze();
      })
      _this.isSave = true;
    },

    cancel_preview() {
      // 取消预览冻结，并返回现场摄像机
      Webcam.unfreeze()
      // console.log();
      this.isImg = false;
      // Webcam.attach("#my_camera");
      this.isSave = false;
    },
    // 保存图片
    save_photo() {
      // actually snap photo (from preview freeze) and display it
      // Webcam.snap(function(data_uri) {
      //   // display results in page
      //   document.getElementById("results").innerHTML =
      //     '<img src="' + data_uri + '"/>';
      //   Webcam.reset();
      // });
      let that = this;

      Webcam.snap(function(data_uri) {
        Webcam.on("uploadProgress", function(progress) {
          console.log(progress);
        });

        Webcam.on("uploadComplete", function(code) {
          // 上传完成!
          // 'code' 将是来自服务器的HTTP响应代码，例如200
          // 'text' 会是原始的回应内容

          if (code == 200) {
            that.isProgerss = true;
            let setInter = setInterval(() => {
              that.progress = Number(that.progress) + 1;
              if (that.progress == 100) {
                clearInterval(setInter);
                that.warndata = [2, "图片上传成功", 2000];
                setTimeout(() => {
                  that.quit();
                  that.progress = 0;
                  that.$parent.endExam()
                }, 2000);
              }
            }, 20);
          } else {
            that.warndata = [1, "图片上传失败!请稍后重试", 2000];
          }
        });

        Webcam.upload(
          data_uri,
          `platform/NetSDK/receiveExamResult?studentIdCard=${that.$store.state.studentIdCard}`
        );
      });
    },
    // 退出拍照
    quit() {
      Webcam.reset();
      this.$emit("change-photo", false);
    },
  },
  mounted() {

  //  return new Promise((res,err)=>{
    Webcam.set({
      width: 640,
      height: 480,
      image_format: "jpeg",
      jpeg_quality: 90,
    });
    Webcam.attach("#my_camera");

  //  })
  },
};
</script>
<style scoped>
#my_camera {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%) scale(1.5, 1.2);
}
button, input[type="button"] {
  padding: 20px 35px;
  border: none;
  font-size: 35px;
  opacity: 0.8;
  font-weight: bold;
  border-radius: 10px;
  word-spacing: 0.3em;
  position: absolute;
  top: 80%;
  left: 50%;
  color: #1b1642;
  transform: translate(-50%, -50%);
  /* transform: translate(-50% -50%); */
}
/* .close {
  top: 15%;
  right: 15%;
} */
.el-progress {
  width: 90%;
  position: absolute;
  top: 20%;
  left: 50%;
  transform: translate(-50%, -50%);
}
</style>
